<template>
  <ListLayout class="htlb-list-warp">
    <el-table
      slot="table"
      class="background-table"
      :data="page.list"
      stripe
      style="overflow-y: auto;"
    >
      <el-table-column show-overflow-tooltip label="序号" type="index"></el-table-column>
      <el-table-column show-overflow-tooltip label="合同编号" prop="htNum">
        <template slot-scope="scope">
          <p>{{scope.row.htNum}}</p>
          <p>乙方：{{scope.row.yfName}}</p>
          <p>{{scope.row.sxStartTime}} 至 {{scope.row.sxEndTime}}</p>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="变更时间" prop="bgTime"></el-table-column>
      <el-table-column show-overflow-tooltip label="生效时间" prop="sxTime"></el-table-column>
      <el-table-column show-overflow-tooltip label="变更原因" prop="bgCause"></el-table-column>
      <el-table-column show-overflow-tooltip label="状态" prop="status">
        <template slot-scope="scope">
          <p v-if="scope.row.status=='dbj'">待补交</p>
          <p v-else-if="scope.row.status=='ysx'">已生效</p>
          <p v-else-if="scope.row.status=='dsx'" style="color:red">待生效</p>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="操作" width="300">
        <template slot-scope="scope">
          <el-button type="text" v-if="scope.row.status=='dbj'">编辑</el-button>
          <el-button type="text">详情</el-button>
           <el-button type="text" v-if="scope.row.status=='dsx'">审核</el-button>
          <el-button type="text" v-if="scope.row.status=='dbj'||scope.row.status=='dsx'">作废</el-button>
          <el-button type="text" v-if="scope.row.status=='dbj'">补交</el-button>
          <el-button type="text" v-if="scope.row.status=='dsx'">取消补交</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      slot="page"
      style="margin-top:5px"
      background
      layout="total, prev, pager, next"
      :total="page.total"
      :page-size="page.pageSize"
      :current-page.sync="page.pageNum"
      @current-change="pageNoToggleHandler"
      @size-change="pageSizeToggleHandler"
    ></el-pagination>
  </ListLayout>
</template>

<script>
export default JBoot({
  data() {
    return {
      moduleName: "htbg",
      color: "#6666FF"
    };
  },

  computed: {},

  methods: {
    getQueryParam() {
      return Object.assign({}, this.queryFormData, { id: this.id });
    },
    initPageInfo(responseData) {
      this.$set(this.page, "list", responseData || []);
    }
  },

  watch: {}
})
  .list()
  .build();
</script>

<style lang="scss">
.htlb-list-warp {
  height: calc(100% - 20px);
  .zhu {
    background-color: green;
    color: #fff;
    padding: 4px 5px;
    border-radius: 50%;
    margin-right: 2px;
  }
  .yuan {
    background-color: #0099ff;
  }
  .el-button {
    border: none;
    padding: 0px;
  }
  .el-popover__title {
    font-size: 14px;
    margin: 5px;
  }
  .table {
    height: calc(100% - 15px) !important;
    overflow-y: auto;
  }
}
.bage {
  padding: 10px;
  p {
    line-height: 40px;
  }
}
</style>
